<?php include("header.php");?>
<div class="container-fluid">
	<div class="row col-md-6 col-md-offset-3 well">
		<form class="form-horizontal" role="form" action="addnewsubmit.php"
			method="post">
			<fieldset>
				<legend><h3>Add new drive record</h3></legend>
			</fieldset>
			<div class="form-group">
				<label for="carID" class="col-sm-4 control-label">Car ID : </label>
				<div class="col-sm-8">
					<input type="text" class="form-control" id="carID"
						value="<?php echo $carNo;?>" disabled="disabled" /> <input
						type="hidden" name="carID" value="<?php echo $carNo;?>" />
				</div>
			</div>
			<div class="form-group">
				<label for="startDateTime" class="col-sm-4 control-label">Start Date
					time : </label>
				<div class="col-sm-8">
					<input class="datetimepicker form-control" type="text"
						name="startDateTime" class="form-control"
						title="Click to select date time">
				</div>
			</div>
			<div class="form-group">
				<label for="endDateTime" class="col-sm-4 control-label">End Date
					time : </label>
				<div class="col-sm-8">
					<input type="text" class="datetimepicker form-control"
						id="endDateTime" name="endDateTime"
						title="Click to select date time" />
				</div>
			</div>
			<div class="form-group">
				<label for="journey" class="col-sm-4 control-label">Journey : </label>
				<div class="col-sm-8">
					<div class="col-sm-6">
						<input type="text" id="journeyFrom" name="journeyFrom"
							class="form-control" placeholder="From" />
					</div>
					<div class="col-sm-6">
						<input type="text" id="journeyTo" name="journeyTo"
							class="form-control" placeholder="To" />
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="visitedPlaces" class="col-sm-4 control-label">Visited
					Places : </label>
				<div class="col-sm-8">
					<div class="input-group col-sm-12">
						<div id="selectedCities" class="col-sm-6"></div>
						<div class="col-sm-4">
							<button id="clearSelectedCities" type="button"
								class="btn btn-default btn-xs hidden pull-right">clear</button>
						</div>
					</div>

					<input type="text" class="form-control"
						title="Type city name" name="placesVisited"/>
<!--					<button id="add" type="button" class="hidden" style="z-index: 5000">City does not exist. Click here to add it.</button>
 					<input type="hidden" name="placesVisited" id="placesVisited" /> -->
				</div>
			</div>
			<div class="form-group">
				<label for="odometerReading" class="col-sm-4 control-label">Odometer
					reading : </label>
				<div class="col-sm-8">
					<div class="col-sm-6">
						<div class="input-group">
							<input type="text" id="startOdometerReading"
								name="startOdometerReading" class="form-control numberBox"
								placeholder="Start" />
							<div class="input-group-addon">km</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="input-group">
							<input type="text" id="endOdometerReading"
								name="endOdometerReading" class="form-control numberBox"
								placeholder="End" />
							<div class="input-group-addon">km</div>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="fuelTopupAmount" class="col-sm-4 control-label">Amount Fuel Top Up : </label>
				<div class="col-sm-8">
					<input type="text" class="form-control numberBox" id="fuelTopupAmount"
						name="fuelTopupAmount" />
				</div>
			</div>
			<div class="form-group">
				<label for="numPatients" class="col-sm-4 control-label">Number of
					Patients : </label>
				<div class="col-sm-8">
					<input type="text" class="form-control numberBox" id="numPatients"
						name="numPatients" />
				</div>
			</div>
			<div class="form-group">
				<label for="numDoctors" class="col-sm-4 control-label">Number of
					Doctors : </label>
				<div class="col-sm-8">
					<input type="text" class="form-control numberBox" id="numDoctors"
						name="numDoctors" />
				</div>
			</div>
			<div class="form-group">
				<label for="numAssistants" class="col-sm-4 control-label">Number of
					Assistents : </label>
				<div class="col-sm-8">
					<input type="text" class="form-control numberBox"
						id="numAssistants" name="numAssistants" />
				</div>
			</div>
			<div class="form-group">
				<label for="carComment" class="col-sm-4 control-label">Car comments :
				</label>
				<div class="col-sm-8">
					<textarea class="form-control" rows="3" id="carComment"
						name="carComment"></textarea>

				</div>
			</div>
			<div class="form-group">
				<label for="toolComment" class="col-sm-4 control-label">Tool comments
					: </label>
				<div class="col-sm-8">
					<textarea class="form-control" rows="3" id="toolComment"
						name="toolComment"></textarea>

				</div>
			</div>
			<div class="form-group">
				<label for="otherComment" class="col-sm-4 control-label">Other
					comments : </label>
				<div class="col-sm-8">
					<textarea class="form-control" rows="3" id="otherComment"
						name="otherComment"></textarea>

				</div>
			</div>
			<div class="form-group" style="text-align: right">
				<button type="submit" class="btn btn-primary" id="submit">Submit</button>
				<button type="reset" class="btn btn-default" id="reset">Cancel</button>
			</div>
		</form>
	</div>
</div>

<script type="text/javascript">
	$("document").ready(function(){
		jQuery('.datetimepicker').datetimepicker({
			format:'Y-m-d H:i'  //'d/m/Y H:i'
		});
		
		var source = ["City1", "City2", "City3"];
	
		$(function () { 
		    $("#auto").autocomplete({
	
		        source: function (request, response) {
		            var result = $.ui.autocomplete.filter(source, request.term);
					
			       /*  if(result=="")
				        $("#add").removeClass("hidden");
			        else
			        	$("#add").addClass("hidden");
 */
		            response(result);

		            $(".ui-autocomplete").css("z-index","2000");

		        },
		    });

		    $("#auto").on( "autocompleteclose", function( event, ui ) {
// 			   displaySelectedCity($(this).val());
		    	$(this).val("");
			 } );
		    
		    $("#add").on("click", function () {
		        source.push($("#auto").val());
		        $(this).addClass("hidden");
		        $("#auto").val("");
		    });

		    $("#clearSelectedCities").on("click",function() {
		    	$("#selectedCities").html("");
		    	$(this).addClass("hidden");
		    });
		});

		$(".numberBox").keypress(function (e) {
		    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
		     	return false;
		    }
		});

		$('form').bind("keyup keypress", function(e) {
			  var code = e.keyCode || e.which; 
			  if (code  == 13) {               
			    e.preventDefault();
			    return false;
			  }
			});

	});

	var displaySelectedCity = function (city) {
		if(city!="") {
			if($("#selectedCities").html()!="") {
		    	$("#selectedCities").append(" -> ");
		    }
			$("#selectedCities").append(city);

			$("#placesVisited").val($("#selectedCities").html());
			$("#clearSelectedCities").removeClass("hidden");
		}
	}
</script>


<?php include("footer.php");?>